<script setup>
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { reqLeaveSave } from '@/api/parent/index';
const router = useRouter();

// li列表
const leaveList = ref([]);

// 加载的页数
let count = 1;

// 下拉加载
const load = async () => {
    loading.value = true;
    const res = await reqLeaveSave(count, 3);
    if (res.dataList) {
        leaveList.value = leaveList.value.concat(res.dataList);
        count++;
    } else {
        noMore.value = true;
    }
    console.log(leaveList.value);
    loading.value = false;
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(false);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

//跳转详情页面
const toDetail = (id, type) => {
    switch (type) {
        case 6:
            router.push({ name: 'detail-leave', params: { id } });
            break;
        case 8:
            router.push({ name: 'detail-stay', params: { id } });
            break;
        default:
            break;
    }
};
</script>

<template>
    <div class="head">
        <div class="heading">
            待办事项
            <div class="count" v-if="leaveList">
                {{ leaveList.length }}
            </div>
        </div>
        <a class="more" @click="router.push({ name: 'seeMore' })">查看更多>></a>
    </div>
    <ul
        class="todoList"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
        infinite-scroll-distance="10"
    >
        <li
            v-for="item in leaveList"
            @click="toDetail(item.id, item.detailedType)"
        >
            <div class="info">
                <span v-if="item.detailedType === 8"
                    >{{ item.studentName }}的留宿申请</span
                >
                <span v-else-if="item.detailedType === 6"
                    >{{ item.studentName }}的请假申请</span
                >
                <span>请家长签署意见......</span>
                <span>{{ item.createTime }}</span>
            </div>
            <div class="state">
                <span
                    v-if="item.state === 1"
                    style="background-color: #f90; color: #fff"
                    >待家长审核</span
                >
            </div>
        </li>
        <div v-if="loading" class="loading" v-loading="loading"></div>
        <div v-if="noMore" class="no-more">没有更多数据了</div>
    </ul>
</template>

<style lang="scss" scoped>
.head {
    display: flex;
    justify-content: space-between;
    align-content: center;

    .heading {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18rem;
        font-weight: bold;

        .count {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16rem;
            height: 16rem;
            border-radius: 10rem;
            color: white;
            background-color: rgb(255, 51, 51);
            font-size: 10rem;
            margin-left: 6rem;
        }
    }

    .more {
        display: flex;
        align-items: center;
        color: rgb(39, 114, 253);
        font-size: 13rem;
    }
}

.todoList {
    position: absolute;
    top: 18rem;
    left: 20rem;
    right: 20rem;
    bottom: 10rem;
    margin-top: 20rem;
    overflow: auto;
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 15rem;
    li {
        height: 15%;
        padding: 10px px 20px;
        background: #fff;
        border: 1px solid #2472e6;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgb(36, 114, 230, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-around;
        .info {
            width: auto;
            height: 80%;
            font-size: 14rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #666;
            :first-child {
                font-weight: bold;
                font-size: 16rem;
            }
        }
        .state {
            height: 30%;
            width: 80rem;
            border-radius: 5rem;
            span {
                width: 100%;
                height: 100%;
                border-radius: 5rem;
                font-size: 14rem;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
